<template>
  <transition name="van-slide-down">
    <div class="comment-container" v-show="dialogVisible">
      <div class="postbox-form">
        <!-- 发帖 -->
        <div v-if="commentType==1">
          <div class="ctext ctitle">
            <label class="comment-label">标题：</label>
            <input type="text" v-model="formDataIssue.title" class="comment-title" name="title" placeholder="请输入标题" />
          </div>
          <div class="ctext">
            <label class="comment-label">文章内容：</label> 
            <textarea class="comment-content" v-model="formDataIssue.content" maxlength="-1" name="content" placeholder="写几句准备发布文章啦..."></textarea>
          </div>
          <div class="comment-img">
            <label class="comment-label">图片：</label>
            <SmallUploadImg ref="smallUploadImgIssue" :maxLength="18"></SmallUploadImg>
          </div>
          <div class="comment-tag" v-if="otherInfo.label_lists && otherInfo.label_lists.length>0">
            <label class="comment-label">标签：</label>
            <ul>
              <li v-for="(labelItem,index) in otherInfo.label_lists" :key="labelItem.label_id" @click="handleClickLabel(labelItem,index)" :class="labelItem.active?'active':''">{{labelItem.title}}</li>
            </ul>
          </div>
          <div class="comment-reward" v-if="otherInfo.post_send_integrals">
            <label class="comment-label">奖励：</label>
            <p>发布文章赠送{{otherInfo.post_send_integrals}}{{otherInfo.point_name}}</p>
          </div>
        </div>
        <!-- 回复帖子 -->
        <div v-else>
          <div class="ctext">
            <label class="comment-label">回复内容：</label>
            <textarea class="comment-content" v-model="formDataReply.content" name="content" placeholder="来写几句回复吧..."></textarea>
          </div>
          <div class="comment-img">
            <label class="comment-label">图片：</label>
            <SmallUploadImg ref="smallUploadImgReplay" :maxLength="5"></SmallUploadImg>
          </div>
        </div>
        <div class="button-box">
          <button type="button" class="btn cancle" @click="dialogVisible = false">取消</button>
          <button type="button" class="btn confirm" v-if="commentType==1" @click="handleClickPublish">发布</button>
          <button type="button" class="btn confirm" v-else @click="handleClickReply">发布</button>
        </div>
      </div>
      <van-overlay :show="showOverlay" >
        <van-loading class="middle-loading" type="spinner"></van-loading>
      </van-overlay>
    </div>
  </transition>
  
</template>
<script>
  import Vue from 'vue'
  import { Toast } from 'vant'
  import { Loading } from 'vant'
  import { Overlay } from 'vant'
  import SmallUploadImg from '@/components/SmallUploadImg'
  import { getCommunityOtherInfo, issueCommunity, replyCommunity } from '@/api/community/article'
  Vue.use(Toast)
  Vue.use(Loading)
  Vue.use(Overlay)
  export default Vue.extend({
    name: 'Comment',
    components: {
      // UploadImg,
      SmallUploadImg
    },
    data() {
      return {
        dialogVisible: false,
        commentType: 0,
        communityId: 0,
        communityReplyId: 0,
        otherInfo: {},
        showOverlay: false,
        formDataIssue: {
          title: '',
          content: '',
          label_ids: [],
          img_urls: []
        },
        formDataReply: {
          community_id: '', // 帖子id
          content: '',
          img_urls: [],
          type_id: '', // 回帖id
          type: 1
        }
      }
    },
    methods: {
      /**
       * uploadImg 抛出的图片参数
       */
      uploadImgListIssue(val) {
        const arr = []
        val.forEach(item => {
          arr.push(item.content)
        })
        this.formDataIssue.img_urls = arr
      },
      // 发帖选择标签
      handleClickLabel(item, index) {
        const labelLists = this.otherInfo.label_lists
        this.$set(this.otherInfo.label_lists[index], 'active', this.otherInfo.label_lists[index].active)
        labelLists[index].active = !labelLists[index].active
        const labelIds = []
        labelLists.forEach((item, index) => {
          if (item.active) {
            labelIds.push(item.label_id)
          }
        })
        this.formDataIssue.label_id = labelIds
        this.otherInfo.label_lists = labelLists
      },
      // 发布帖子
      handleClickPublish() {
        this.showOverlay = true
        let img_urls = []
        
        img_urls = this.$refs.smallUploadImgIssue ? this.$refs.smallUploadImgIssue.imgList: []
        
        this.formDataIssue.img_urls = img_urls
        const param = Object.assign(this.formDataIssue, {}, true)
        issueCommunity(param).then(res => {
          this.showOverlay = false
          if (res.status === 1) {
            Toast(res.msg)
            // 重新请求文章列表数据
            this.$emit('reloadArticle')
            this.dialogVisible = false
          } else {
            Toast('发布失败：' + res.msg)
          }
        })
      },
      // 回复帖子上传图片
      uploadImgListReplay(val) {
        const arr = []
        val.forEach(item => {
          arr.push(item.content)
        })
        this.formDataReply.img_urls = arr
      },
      // 回复帖子
      handleClickReply() {
        this.showOverlay = true
        let img_urls = []
        img_urls = this.$refs.smallUploadImgReplay ? this.$refs.smallUploadImgReplay.imgList: []
        
        this.formDataReply.img_urls = img_urls
        this.formDataReply.community_id = this.communityId
        this.formDataReply.type_id = this.communityReplyId
        const param = Object.assign(this.formDataReply, {}, true)
        replyCommunity(param).then(res => {
          this.showOverlay = false
          if (res.status === 1) {
            Toast(res.msg)
            // 重新请求文章详情数据
            this.$emit('reloadReply')
            this.dialogVisible = false
          } else {
            Toast('发布失败：' + res.msg)
          }
        })
      },

      // 获取文章标签、赠送积分等信息
      getCommunityOtherInfoPost() {
        const param = { id: this.$route.query.detailId }
        getCommunityOtherInfo(param).then(res => {
          const otherInfo = res.data
          this.otherInfo = otherInfo
        })
      }
    },
    mounted() {
      this.getCommunityOtherInfoPost()
    },
    watch: {
      dialogVisible(val) {
        // 弹窗关闭时清除数据
        if (!val) {
          this.formDataIssue = {
            title: '',
            content: '',
            label_ids: [],
            img_urls: []
          }
          this.formDataReply = {
            community_id: '', // 帖子id
            content: '',
            img_urls: [],
            type_id: '', // 回帖id
            type: 1
          }
          if (this.otherInfo.label_lists && this.otherInfo.label_lists.length > 0) {
            this.otherInfo.label_lists.forEach((item, index) => {
              if (item.active) {
                item.active = false
              }
            })
          }
          if (this.$refs.smallUploadImgIssue) this.$refs.smallUploadImgIssue.imgList = []
          if (this.$refs.smallUploadImgReplay) this.$refs.smallUploadImgReplay.imgList = []
          
        }
      }
    }

  })
</script>
<style lang="scss">
  @import "../../styles/mixin";
  @import "../../styles/variables";
  input[type="text"],textarea{
    caret-color:#ff8420;
    outline:0;
    -webkit-appearance: none;
  }
	.comment-container{
		position: fixed;
    left: 0;
    right: 0;
    top: 0;
    // bottom: 0;
    height:100%;
    overflow:auto;
		z-index: 1111;
    background:#fff;
		.postbox-form{
			padding:0 20px 20px;
		}
		.comment-label{
			display:block;
      line-height: 1;
      margin:46px 0 26px;
			font-size: 32px;
			font-weight:normal;
			color: #000;
		}
		@include placeColor(#666,1);
		.comment-title{
			display: block;
      height: 100px;
			line-height: 100px;
			width: 100%;
      padding:0 26px;
			font-size: 28px;
      border: 1px solid #eeeeee;
      border-radius:4px;
      background:#f7f7f7;
      color: #000;
      @include boxSizing;
		}
		.comment-content{
			display: block;
      width: 100%;
      padding:34px 26px;
      min-height: 220px;
			line-height: 40px;
			font-size: 28px;
      border: 1px solid #eeeeee;
      border-radius:4px;
      background:#f7f7f7;
      color: #000;
      resize:none;
      @include boxSizing;
    }
		.img-list{
			li{
				border: none;
				width: 160px;
				height: 160px;
				margin: 16px 8px 0 0;
				overflow: hidden;
			}
		}
		.button-box{
    	padding: 66px 0 20px;
			text-align: center;
			.btn{
				width: 48%;
				height: 80px;
				line-height: 78px;
				border: 0;
				color: #fff;
				border-radius: 40px;
        font-size: 28px;
        text-align: center;
        margin: 0 4px;
			}
			.cancle{
        border: 1px solid #ff5f00;
				background-color: #fff;
        color: #ff4e00;
        @include boxSizing;
			}
			.confirm{
        line-height:80px;
				@include gradient(right,#ff7300,#ff4c00);
			}
		}
    .comment-tag{
      li{
        display: inline-block;
        height: 52px;
        line-height: 50px;
        margin: 0 10px 26px 0;
        padding: 0 26px;
        font-size: 26px;
        border:1px solid #d8d8d8;
        border-radius: 26px;
        color:#666;
        background: #fff;
        &.active{
          border-color:#ff6900;
          background: #ff6900;
          color: #fff;
        }
      }
    }
    .comment-reward{
      p{
        font-size:28px;
        line-height:1.5;
        color:#666;
      }
    }
	}
</style>
